<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>SVG &lt;defs&gt; sprite preview | svg-sprite</title>
    <style>
      @charset "UTF-8";
      body {
        padding: 0;
        margin: 0;
        color: #666;
        background: #fafafa;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        line-height: 1.4;
      }
      header {
        display: block;
        padding: 3em 3em 2em 3em;
        background-color: #fff;
      }
      header p {
        margin: 2em 0 0 0;
      }
      section {
        border-top: 1px solid #eee;
        padding: 2em 3em 0 3em;
      }
      section ul {
        margin: 0;
        padding: 0;
      }
      section li {
        display: inline;
        display: inline-block;
        background-color: #fff;
        position: relative;
        margin: 0 2em 2em 0;
        vertical-align: top;
        border: 1px solid #ccc;
        padding: 1em 1em 3em 1em;
        cursor: default;
      }
      .icon-box {
        margin: 0;
        width: 144px;
        height: 144px;
        position: relative;
        background: #ccc
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23fff' d='M6 0h6v6H6zM0 6h6v6H0z'/%3E%3C/svg%3E")
          top left repeat;
        border: 1px solid #ccc;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
      .icon {
        display: inline;
        display: inline-block;
      }
      h1 {
        margin-top: 0;
      }
      h2 {
        margin: 0;
        padding: 0;
        font-size: 1em;
        font-weight: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        position: absolute;
        left: 1em;
        right: 1em;
        bottom: 1em;
      }
      footer {
        display: block;
        margin: 0;
        padding: 0 3em 3em 3em;
      }
      footer p {
        margin: 0;
        font-size: 0.7em;
      }
      footer a {
        color: #0f7595;
        margin-left: 0;
      }
    </style>

    <!--

Sprite shape dimensions
====================================================================================================
You will need to set the sprite shape dimensions via CSS when you use them as inline SVG, otherwise
they would become a huge 100% in size. You may use the following dimension classes for doing so.
They might well be outsourced to an external stylesheet of course.

-->

    <style type="text/css">
      {{#shapes}} {{#selector.dimensions}}{{expression}}{{^last}}, {{/last}}{{/selector.dimensions}} { width: {{width.outer}}px; height: {{height.outer}}px; }
      {{/shapes}}
    </style>

    <!--
====================================================================================================
-->
  </head>
  <body>
    <!--

Inline <defs> SVG sprite
====================================================================================================
This is an inlined version of the generated SVG sprite. The single images may be <use>d everywhere
below within this document. Please see

    https://github.com/svg-sprite/svg-sprite/blob/main/docs/configuration.md#defs--symbol-mode

for further details on how to create this embeddable sprite variant.

-->

    <svg width="0" height="0" style="position: absolute">
      <defs>{{#shapes}} {{{svg}}} {{/shapes}}</defs>
    </svg>

    <!--
====================================================================================================
-->

    <header>
      <h1>SVG <code>&lt;defs&gt;</code> sprite preview</h1>
      <p>
        This preview features two methods of using the generated sprite in
        conjunction with inline SVG. Please have a look at the HTML source for
        further details and be aware of the following constraints:
      </p>
      <ul>
        <li>
          Your browser has to
          <a
            href="https://caniuse.com/svg-html5"
            target="_blank"
            rel="noopener noreferrer"
            >support inline SVG</a
          >
          for these techniques to work.
        </li>
        <li>
          The embedded sprite (A) slightly differs from the generated external
          one. Please
          <a
            href="https://github.com/svg-sprite/svg-sprite/blob/main/docs/configuration.md#defs--symbol-mode"
            target="_blank"
            rel="noopener noreferrer"
            >see the documentation</a
          >
          for details on how to create such an embeddable sprite.
        </li>
        <li>
          Internet Explorer up to version 11 doesn't support external sprites
          for use with inline SVG. For IE 9-11, you may polyfill this
          functionality with
          <a
            href="https://github.com/jonathantneal/svg4everybody"
            target="_blank"
            rel="noopener noreferrer"
            >SVG for Everybody</a
          >.
        </li>
      </ul>
    </header>
    <section>
      <!--

A) Inline SVG with embedded sprite
====================================================================================================
These SVG images make use of fragment identifiers (IDs) and are extracted out of the inline sprite
embedded above. They may be styled via CSS.

-->

      <h3>A) Inline SVG with embedded sprite</h3>
      <ul>
        {{#shapes}}
        <li title="{{name}}">
          <div class="icon-box">
            <!-- {{name}} -->
            <svg
              viewBox="0 0 {{width.outer}} {{height.outer}}"
              class="{{#selector.dimensions}}{{#last}}{{#classname}}{{raw}}{{/classname}}{{/last}}{{/selector.dimensions}}"
            >
              <use xlink:href="#{{name}}"></use>
            </svg>
          </div>
          <h2>{{name}}</h2>
        </li>
        {{/shapes}}
      </ul>

      <!--
====================================================================================================
-->
    </section>

    <footer>
      <p>
        Generated at {{date}} by
        <a
          href="https://github.com/svg-sprite/svg-sprite"
          target="_blank"
          rel="noopener noreferrer"
          >svg-sprite</a
        >.
      </p>
    </footer>
  </body>
</html>
